<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        body{
            /*剔除body8px的margin*/
            margin: 0px;
        }
        #main {
            width: 80%;
            height: 800px;
            background-color: aliceblue;
            margin: 0px auto;
        }
        #main > div {
            width: 100%;
        }
        #header {
            height: 120px;
            background-color: red;
        }

        #mainbody {
            height: 600px;
            background-color: darkgreen;
        }

        #footer {
            height: 120px;
            background-color: blueviolet;
        }
        #mainbody > div{
            /*左浮动*/
            float:left;
        }

        #mainleft{
            width: 5%;
            height: 80%;
            background-color: darkgray;
        }

        #maincenter{
            width: 5%;
            height: 80%;
            background-color: orange;
        }
        #mainright{
            float: right !important;
            width: 5%;
            height: 80%;
            background-color: chartreuse;
        }
        #mainfooter{
            /*清除浮动*/
            clear: both;
            width: 10%;
            height: 20%;
            background-color: bisque;
        }


    </style>
    <meta charset="UTF-8">
    <title>div+css布局</title>
</head>
<body>
<!---main主区域--->
<div id="main">
    <!--header-->
    <div id="header">

    </div>
    <div id="mainbody">
        <div id="mainleft"></div>
        <div id="maincenter"></div>
        <div id="mainright"></div>
        <div id="mainfooter"></div>
    </div>
    <div id="footer">

    </div>

</div>
</body>
</html>